/*
 * @Author: szx
 * @Date: 2023-03-31 13:54:27
 * @LastEditTime: 2023-04-01 16:29:39
 * @Description:
 * @FilePath: \learn\fullstackopen\bloglist-part5\src\components\Blog.jsx
 */
import { useState } from 'react';

const blogStyle = {
    paddingTop: 10,
    paddingBottom: 10,
    paddingLeft: 2,
    border: 'solid',
    borderWidth: 3,
    marginBottom: 5
};

const deleteStyle = {
    backgroundColor: 'skyblue'
};

const Blog = ({ blog, handleLikes, loggedUser, handleBlogDelete }) => {
    const [visible, setVisible] = useState(false);

    if (!visible) {
        return (
            <div style={blogStyle} className="shortBlogInfo">
                <div>
                    {blog.title} {blog.author}
                    <button id="view" onClick={() => setVisible(true)}>
                        view
                    </button>
                </div>
            </div>
        );
    }
    return (
        <div className='blog' style={blogStyle}>
            <div>
                {blog.title} {blog.author} <button onClick={() => setVisible(false)}>hide</button>
            </div>
            <div>{blog.url}</div>
            <div>
                likes {blog.likes}{' '}
                <button id="like" onClick={handleLikes}>
                    like
                </button>
            </div>
            <div>{blog.user.name}</div>
            <div>
                {blog.user && blog.user.id === loggedUser && (
                    <button id="delete" style={deleteStyle} onClick={handleBlogDelete}>
                        delete
                    </button>
                )}
            </div>
        </div>
    );
};

export default Blog;
